<template>
    <div class="list-content h100 bg-fff">
        <AdminList title="管理员" :adminList="adminList" />

        <TableForm :initial-form="form" @query="getList" @reset="reset" :total="total" @current-change="currentChange"
            @size-change="sizeChange" ref="tableFormRef">
            <template #form-items>
                <el-form-item>
                    <el-input v-trim placeholder="请输联系电话" v-model="form.phone" style="width: 190px"></el-input>
                </el-form-item>
            </template>

            <!-- 下方表格区域 -->
            <template #table>
                <CommonTable :table-data="list" :max-height="580">
                    <el-table-column prop="title" label="序号" width="100" type="index">
                        <template #="scope">
                            {{ (form.pageIndex - 1) * form.pageSize + (scope.$index + 1) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="phoneNo" label="联系电话" />
                    <el-table-column prop="creationDate" label="发送时间">
                        <template #="{ row }">
                            <span>{{ getDateTime(Date.parse(row.creationDate).toString())[11] }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="content" label="验证码" />
                </CommonTable>
            </template>
        </TableForm>
    </div>
</template>
<script setup lang="ts">
import { AdminEnum } from '@/enum/admin';
import AdminList from '@/components/AdminList.vue';
import TableForm from '@/components/TableForm/index.vue';
import CommonTable from '@/components/CommonTable/index.vue';
import { getAdminList } from '@/apis/admin';
import { Search, RefreshRight } from '@element-plus/icons-vue';
import { reactive, ref, onMounted } from 'vue';
import api from '@/apis/code';
import { errorTips, getDateTime } from '@/utils/utils';

interface Iform {
    phone: string;
}

const form = reactive({
    phone: '',
    pageIndex: 1,
    pageSize: 50,
    sortField: '',
    sortOrder: '',
});

onMounted(() => {
    getList();
    getAdmin();
});

const tableFormRef = ref<any>(null);
const total = ref(0);
const list = ref([]);

// list列表
const getList = () => {
    api.getSmsCodeList(form).then(res => {
        if (!res || res.code != 1) return;
        const { data, count: num } = res.data;
        tableFormRef.value && tableFormRef.value.updateTotal(num);
        list.value = data;
        total.value = num;
    });
};

const reset = () => {
    form.pageIndex = 1;
    form.pageSize = 50;
    form.phone = '';
    getList();
};

//获取国家页面的管理员数据
const adminList = ref([]);

const getAdmin = async () => {
    const res = await getAdminList({ menuId: AdminEnum.COUNTRY_MANAGEMENT });
    if (!res || res.code != 1) {
        adminList.value = [];
        return;
    }
    adminList.value = res.data;
};

const currentChange = (val: number) => {
    form.pageIndex = val;
    getList();
};

const sizeChange = (val: number) => {
    form.pageSize = val;
    getList();
};
</script>

<style scoped lang="scss">
.list-content {
    position: relative;
    border-radius: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 15px 20px;
}
</style>
